<template>
  <!-- 首页 -->
  <div class="content">

    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="always" style="width: 888px; margin: auto">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>

    <!-- 热销商品 -->
    <el-card style="margin-top: 20px;" :body-style="{padding:'10px'}">
      <el-row style="height: 200px;">
        <el-col :span="1" class="syhd">
          <span class="syhd-title">热销商品</span>
        </el-col>
        <el-col :span="3" v-for="(o) in 7" :key="o" style="height: 200px; margin: 0 5px">
          <el-card :body-style="{ padding: '0px' }" style="height: 200px;">
            <img :src="imgUrl3" class="image">
            <span>好美的风景</span>
            <br>
            <span style="margin: 0 50px">￥ 9.9</span>
            <span class="el-icon-shopping-cart-2"></span>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 秒杀场 -->
    <el-card style="margin-top: 20px;" :body-style="{padding:'10px'}">
      <el-row style="height: 200px;">
        <el-col :span="1" class="syhd">
          <span class="syhd-title">整点秒杀场</span>
        </el-col>
        <el-col :span="3" v-for="(o) in 7" :key="o" style="height: 200px; margin: 0 5px">
          <el-card :body-style="{ padding: '0px' }" style="height: 200px;">
            <img :src="imgUrl" class="image">
            <span>好吃的汉堡</span>
            <br>
            <span style="margin: 0 50px">￥ 3.5</span>
            <span class="el-icon-shopping-cart-2"></span>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 新品首发 -->
    <el-card style="margin-top: 20px;" :body-style="{padding:'10px'}">
      <el-row style="height: 200px;">
        <el-col :span="1" class="syhd">
          <span class="syhd-title">新品首发</span>
        </el-col>
        <el-col :span="3" v-for="(o) in 7" :key="o" style="height: 200px; margin: 0 5px">
          <el-card :body-style="{ padding: '0px' }" style="height: 200px;">
            <img :src="imgUrl2" class="image">
            <span>好看的宠物</span>
            <br>
            <span style="margin: 0 50px">￥ 18.8</span>
            <span class="el-icon-shopping-cart-2"></span>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 猜你喜欢 -->
    <el-card style="margin-top: 20px;" :body-style="{padding:'10px'}">
      <h2 style="color: crimson">猜你喜欢 为你推荐</h2>
      <el-row style="margin-left: 50px">
        <el-col :span="3" v-for="(o) in 21" :key="o" style="margin: 0 8px">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" >
            <div>
              <span>又是好吃的汉堡</span>
              <div class="bottom clearfix">
                <span>￥ 5.5</span>
                <el-button type="text" class="button" icon="el-icon-shopping-cart-2">立即购买</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        imgUrl: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
        imgUrl2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        imgUrl3: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      }
    }
  }
</script>

<style scoped>
  .content {
    margin-top: 8px;
    background-color: #F2F6FC
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .image {
    width: 200px;
    height: 150px;
  }

  .syhd {
    margin-right: 26px;
    width: 30px
  }

  .syhd-title {
    float: left;
    font-weight: 600;
    color: red
  }

  .button{
    color: red;
    font-weight: 600;
  }
</style>
